﻿@{
    ViewBag.Title = "Upload";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
@model TaoPortal.Areas.Admin.Models.UploadModel
<script src="~/Areas/Admin/Content/plupload/moxie.min.js"></script>
<script src="~/Areas/Admin/Content/plupload/plupload.full.min.js"></script>
<style type="text/css">
    .progress {
        height: 6px;
        width: 386px;
        margin-top: 3px;
    }
</style>
<div class="row-fluid" style="margin-top: 5px">
    <div class="span24 span-first">
        <form class="form-horizontal" id="uploadForm" enctype="multipart/form-data" method="post" action="/Admin/FileManage/Upload">
            <div class="control-group">
                <label class="control-label">文件分类：</label>
                <div class="controls">
                    <div id="FileClassName" style="width: 377px">
                        @Html.HiddenFor(x => x.FileClassID)
                    </div>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" style="height: 40px">文件地址：</label>
                <div class="controls" style="height: 40px">
                    @Html.HiddenFor(x=>x.FileUrl)<button id="uploadBtn" class="button">上传文件</button>&nbsp;<span id="FName"></span>
                    <div id="progressbar"></div>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">文件名称：</label>
                <div class="controls">
                    @Html.TextBoxFor(x => x.FileName, new {datarules = "{required:true}", style = "width:376px;" })
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" style="height: 77px">文件说明：</label>
                <div class="controls" style="height: 77px">
                    @Html.TextAreaFor(x => x.Remark, new { style = "width:376px;height:65px" })
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">排序：</label>
                <div class="controls">
                    @Html.TextBoxFor(x => x.Sort, new {datarules = "{required:true,number:true}" })
                </div>
            </div>
            <hr>
            <div style="text-align: center">
                <button class="button button-primary" id="submitBtn" type="submit">提交</button>
                <button class="button" type="reset" onclick="parent.CloseWin()">取消</button>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    var ProgressBar = BUI.ProgressBar;
    var Progressbar = ProgressBar.Base;
    var progressbar = new Progressbar({
        elCls: 'progress progress-striped active',
        render: '#progressbar',
        tpl: '<div class="bar"></div>',
        percent: 0
    });
    progressbar.render();

    var uploader = new plupload.Uploader({
        runtimes: 'flash',
        browse_button: 'uploadBtn', // you can pass in id...
        url: "../../FileUpload/AjaxUploadFile",
        filters: {
            max_file_size: '10mb'//,
            //mime_types: [
            //    { title: "Image files", extensions: "jpg,jpeg,gif,png" }
            //    //{ title: "Zip files", extensions: "zip,rar" }
            //]
        },
        flash_swf_url: '../../../Areas/Admin/Content/plupload/Moxie.swf',
        init: {
            PostInit: function () {

            },
            FilesAdded: function (up, files) {
                uploader.start();
            },
            UploadProgress: function (up, file) {
                progressbar.set('percent', file.percent);
            },
            FileUploaded: function (up, file, info) {
                var res = '{}';
                if (info.response == null) {
                    var headers = info.responseHeaders.split('\r\n');
                    $.each(headers, function (n, item) {
                        if (item && item.split(':')[0] == 'res') {
                            res = eval('(' + item.split(':')[1] + ')');
                        }
                    })
                } else {
                    res = eval('(' + info.response + ')');
                }
                if (res.result == true) {
                    $('#FName').html(file.name);
                    $('#FileUrl').val(res.id);
                    $('#FileName').val(file.name.split('.')[0]);
                } else {
                    alert(decodeURI(res.msg));
                }
            },
            Error: function (up, err) {
                alert("Error #" + err.code + ": " + err.message);
            }
        }
    });
    uploader.init();
    $('#submitBtn').click(function () {
        if ($('#FileUrl').val() == '') {
            alert('请选择文件！');
            return false;
        }
    })
    function SubmitSuccess() {
        alert('提交成功！');
        location.reload();
    }
    BUI.use(['bui/extensions/treepicker', 'bui/tree', 'bui/form', 'bui/tooltip'], function (TreePicker, Tree, Form, Tooltip) {

        $('input,select,textarea').each(function (n, o) {
            if ($(o).attr('datarules')) {
                $(o).attr('data-rules', $(o).attr('datarules'));
                $(o).removeAttr('datarules');
            }
        });
        new Form.Form({
            srcNode: '#uploadForm',
            errorTpl: '<span class="x-icon x-icon-small x-icon-error" data-title="{error}">!</span>'
        }).render();
        new Tooltip.Tips({
            tip: {
                trigger: '.x-icon-error', //出现此样式的元素显示tip
                alignType: 'top', //默认方向
                elCls: 'tips tips-warning tips-no-icon tip1',
                offset: 10 //距离左边的距离
            }
        }).render();

        var Select = BUI.Select;
        var data = eval('@Html.Raw(Model.ClassData)');
        //由于这个树，不显示根节点，所以可以不指定根节点
        var tree = new Tree.TreeList({
            nodes: data,
            //dirSelectable: false,//阻止树节点选中
            showLine: true //显示连接线
        });

        var picker = new TreePicker({
            width: '385',
            children: [tree] //配置picker内的列表
        });
        select = new Select.Select({
            render: '#FileClassName',
            width: '385',
            picker: picker,
            forceFit: false, //不强迫列表跟选择器宽度一致
            valueField: '#FileClassID'
        });
        select.render();
        //picker.render();
    });
</script>
